<template>
	<view :class="mode">
		<view style="background:url('/static/home/bbb2.png') no-repeat;" :class="mode=='pc'?'py-8':'p-2'">
			<view class="mx-auto flex flex-col items-center" :class="mode=='pc'?'max-w-1200':'p-2 flex-col'" >
				<view class="w-full text-center text-4xl my-8 font-bold" style="color: #3D3D3D;">嗨，有什么可以帮你?</view>
				<el-input class="lz-input" v-model="search.searchValue" placeholder="请输入要搜索的内容" @input="getList()"/>
				<view class="mt-8 w-full" style="position: sticky; top: 100px;">
					<view class="rounded-md flex  justify-center" :class="mode=='pc'?'gap-8':'gap-2 flex-wrap'"  style="min-width: 200rpx;">
						<view v-for="(item,index) in btnList" :key="index" class="hoverbg cursor-pointer rounded-md whitespace-nowrap bg-white py-2 px-4" 
						:class="{activeBtn:activeId==item.id}" @click="clickBtn(item)">
							{{item.className}}
						</view>
					</view>
				</view>
				<view class="bg-white w-full mt-8 p-8 gap-8 rounded-xl justify-between" style="min-height: 500px;">
					<view style="position: sticky; top: 180px;">
						<view v-for="(item,index) in list" style="border-bottom: 1px solid #f0f0f0;" class="p-4 cursor-pointer" @click="itemClick(item)">
							<view class="flex justify-between items-center">
								<view class="text-base font-bold">{{item.articleTitle}}</view>
								<view class="flex items-center text-md text-black__70 gap-4">
									<view class="flex items-center gap-1"><uni-icons type="calendar" size="20" color="#787878"></uni-icons>{{item.createTime}}</view>
									<view class="flex items-center gap-1"><uni-icons type="eye" size="20" color="#787878"></uni-icons>浏览{{item.seq||53}}</view>
								</view>
							</view>
							<view class="text-md text-black__50 mt-2">{{item.subTitle}}</view>
						</view>
						<el-empty description="暂无数据" v-if="list.length==0" />
						<view class="mt-8 w-full flex justify-center">
							<template v-if="mode=='pc'">
								<el-pagination class="mx-auto" v-model:current-page='search.pageNum' background
									layout='total,sizes,consists, prev, pager, next'
									:page-sizes='[10,20,30]' :total='total' :page-size='search.pageSize'
									@size-change='handleSizeChange' @current-change="handleCurrentChange"/>
							</template>
							<template v-if="mode=='app'">
								<el-pagination v-model:current-page='search.pageNum' background size="small"
									layout="prev, pager, next"
									:page-sizes='[10,20,30]' :total='total' :page-size='search.pageSize'
									@size-change='handleSizeChange' @current-change="handleCurrentChange"/>
							</template>
						</view>
					</view>
					
					
				</view>
				
			</view>
		</view>
		<footerPage></footerPage>
		<tabBar v-if="mode=='app'"></tabBar>
		<appMeum v-if="mode=='app'"></appMeum>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				loading:false,
				search:{
					searchValue:'',
					pageSize: 10,
					pageNum: 1,
				},
				activeId:0,
				btnList: [],
				list:[],
				total:0
			}
		},
		computed: {
			...mapState({
				mode:state=>state.app.mode
			})
		},
		onLoad() {
			// 获取分类
			this.articleTypeList()
		},
		methods: {
			// 点击详情
			itemClick(row){
				console.log(row);
				uni.navigateTo({
					url: `/pages/articleDetails/articleDetails?id=${row.id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			// 点击按钮
			clickBtn(row) {
				this.activeId = row.id
				// 获取列表
				this.getList()
			},
			// 获取分类
			articleTypeList(){
				this.loading = true
				uni.$http.get(`/wap/saasUser/articleTypeList`,{}).then(res => {
					this.loading=false
					if (res.code == 200&&res.data) {
						this.btnList = res.data
						this.activeId = res.data[0].id
						// 获取列表
						this.getList()
					}else{
						this.btnList = []
					}
				})
			},
			// 获取列表
			getList(){
				this.loading = true
				let req = {
					params:{
						...this.search,
						articleTypeId:this.activeId,//分类id
					}
				}
				uni.$http.get(`/wap/saasUser/articleList`,req).then(res => {
					this.loading=false
					if (res.code == 200&&res.rows) {
						this.total = res.total
						this.list = res.rows
					}else{
						this.total = 0
						this.list = []
					}
				})
			},
			handleCurrentChange(val){
				this.search.pageNum = val
				this.getList()
			},
			// 改变分页数量
			handleSizeChange(val){
				this.search.pageSize = val
				this.getList()
			}
			
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .el-input__wrapper{
		border-radius: 1000px;padding: 10px 30px;
	}
	
	
	.pc {
		.lz-input{
			width: 50%;margin: auto;
		}
	}

	.app {
		width: 100%;padding-bottom: 120rpx;
		.lz-input{
			width: 98%;margin: auto;
		}
	}
	.hoverbg:hover{
		background: #597EF7;color: #fff;
	}
	.activeBtn{
		background: #597EF7;color: #fff;
	}
</style>